<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>

</head>
<body>

<form class="layui-form" id="orderForm" action="">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">QQ号</label>
            <div class="layui-input-inline">
                <input type="text" name="qq_no"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
        <label class="layui-form-label">微信号</label>
        <div class="layui-input-inline">
            <input type="text" name="wechat_no" lay-verify="required"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        </div>
    <div class="layui-inline">
        <label class="layui-form-label">微信备注</label>
        <div class="layui-input-inline">
            <input type="text" name="wechat_mark" lay-verify="required"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
        <label class="layui-form-label">购买课程</label>
        <div class="layui-input-inline">
            <select name="course_name" lay-filter="aihao">
                <option value="JAVA">JAVA</option>
                <option value="C">C</option>
                <option value="C++">C++</option>
                <option value="HTML">HTML</option>
                <option value="PYTHON">PYTHON</option>
            </select>
        </div>
        </div>
    <div class="layui-inline">
        <label class="layui-form-label">课程价格</label>
        <div class="layui-input-inline">
            <input type="text" name="course_price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="tel" name="tel" lay-verify="phone" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">购买日期</label>
            <div class="layui-input-inline">
                <input type="text" name="order_date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" onclick="doSave()" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    var $;
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
            $=layui.jquery;
        //日期
        laydate.render({
            elem: '#date'
        });

    });
    function doSave() {
        var data = $("#orderForm").serialize();
        $.post("/courseOrder/addOrder",data,function (responseData) {
            if(responseData.success==1){
                layer.alert("添加成功",{yes:function () {
                        parent.layer.closeAll();
                        parent.parent.location.reload();
                    }});

            }else{
                layer.alert("添加失败，请联系管理员");
            }
        })
    }
</script>

</body>
</html>